/* 当前的canvas的属性包括操作内容 */

#canvas_input {
    /* width:  120px; */
    height: 40px;
    padding: 0px 14px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #000;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    font-size: 16px;
}


/* 线条的属性 */

.svg_component_string {
    /* stroke-width: 12px;
    stroke:#c6c7cd; */
    /* stroke-dasharray:5 5; */
    /* stroke-dasharray: 15 5;
    stroke-dashoffset: 0; */
    /* animation: svg_component_string 100ms infinite linear; */

    

    stroke-width: 4px;
    stroke: #c6c7cd;
    stroke-dasharray: 20 5;
    animation: svg_component_string 200ms infinite linear;
}

@keyframes svg_component_string {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -25;
    }
}


/* 选中框的属性 */

.svg_selectBox_border {
    /* stroke-dasharray:5 5; */
    stroke-dasharray: 3 3;
    stroke-dashoffset: 0;
    animation: svg_selectBox_border 200ms infinite linear;
}

@keyframes svg_selectBox_border {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -6;
    }
}


/* 线条关联属性 */

.svg_component_link_btn path {
    fill: #1296db;
    transition: fill 100ms ease;
}

.svg_component_link_btn:hover path {
    fill: #31b6fd;
}

.svg_component_link_btn:active path {
    fill: #5285a0;
}

.svg_component_link {
    /* stroke-dasharray:5 5; */
    stroke: #00a2ff93;
    stroke-width: 7px;
    /* stroke-dasharray: 15 5;
    stroke-dashoffset: 0;
    animation: svg_component_link 400ms infinite linear; */
    
}

@keyframes svg_component_link {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -20;
    }
}